"use client"
import 'react'
import { Tabs, theme, Image} from 'antd';
import type { TabsProps } from 'antd';
import Link from 'next/link';
import './index.module.css'
import { cn } from "@/lib/util";
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';
import { createContext, useRef, useState,useEffect } from "react";
import { OpenAIOutlined } from '@ant-design/icons';
import SmallText from '@/components/base/UI/SmallText';
import { Swiper, SwiperSlide } from 'swiper/react';
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

interface IntroduceItem {
    title: string
    introduce: string
    imgSrc: string
}

/**核心数据 */
export default function Introduce() {
    const lhbArr: IntroduceItem[] = [
        {
            title: '游资',
            introduce: '使用人脸检测和定位技术，可以准确地检测图像中的人脸，并提供每个人脸的边界框坐标以及多个个关键点的坐标信息，这项技术几乎是所有人脸编辑功能的基础',
            imgSrc: 'https://bj.bcebos.com/v1/yy-ai-train/dataset/projects/ai/cv/yy_aigc_bos/frontend/20240927/ai_open_platform/face/face_5.jpeg?authorization=bce-auth-v1%2F747be619d1d446d095140de037ee7448%2F2024-09-27T08%3A01%3A41Z%2F-1%2F%2Fc530a7a79314b93b9285080501b8f9dfbb05fde59b645d2ba6f432ebab5dcaa0'
        },
         {
            title: '机构',
            introduce: '利用深度学习算法，快速定位图像中人脸并lhb标记位置，广泛应用于安防监控和身份验证',
            imgSrc: '/face_detection.png'
        },
        {
            title: '营业部',
            introduce: '基于人脸特征信息，计算图片中两张人脸的相似程度，可应用于人脸验证、个性化美颜等场景',
            imgSrc: '/face_4.jpg'
        },

    ]

    const items: TabsProps['items'] = [
        {
            key: '1',
            label: (
                <div className='flexCenter flex-col'>
                    <i className="iconfont icon-renlianshibie1" style={{ fontSize: '60px' }}></i>
                    <span className='text-[20px]'>龙虎榜</span>
                </div>
            ),
            children: (
                <div className='w-full h-[500px]'>
                    <TabChildren dataArray={lhbArr} />
                </div>
            )
        }
    ]
    const tabBarStyle = {
        marginTop: '50px',
    }
    const renderTabBar: TabsProps['renderTabBar'] = (props, DefaultTabBar) => {
        return <DefaultTabBar {...props} />
    }
    const [activeKey, setActiveKey] = useState('1');
    const tabsRef = useRef<HTMLDivElement | null>(null);
    /**鼠标滑动切换Tabs */
    useEffect(() => {
        if (!tabsRef.current) return;
        const tabs = tabsRef.current.querySelectorAll('.ant-tabs-tab-btn');
        const tabsLength = tabs.length;

        for (let i = 0; i < tabsLength; i++) {
            tabs[i].addEventListener('mousemove', ()=> setActiveKey(JSON.stringify(i+1)))
        }
        return () => {
          if (tabsRef.current) {
            for (let i = 0; i < tabsLength; i++) {
                tabs[i].removeEventListener('mousemove', ()=> setActiveKey(JSON.stringify(i+1)));
              }
          }
        };
      }, []);
    return (
        <>
            <div className='pt-[80px] flex flex-col justify-center items-center bg-[#f8f8f8]'>
                <div className='flex justify-between items-center w-[1200px]'>
                    <div>
                        <div className='text-[40px] font-bold'>核 心 数 据</div>
                        <SmallText size={28}>CORE TECHNOLOGY</SmallText>
                    </div>
                    <div className='w-[400px] text-[#868686]'>提供有价值的股市数据，专业的数据分析团队，开启你的赚钱之旅</div>
                </div>
                <div ref={tabsRef}>
                    <Tabs centered tabBarStyle={tabBarStyle} activeKey={activeKey} items={items} tabBarGutter={100} style={{ width: '1500px',backgroundColor:"#f8f8f8" }} />
                </div>
            </div>
        </>
    )
}

const TabChildren = ({ dataArray }: { dataArray: Array<IntroduceItem> }) => {
    return (
        <>
            <Swiper
                className='w-full'
                modules={[Navigation, Pagination, Scrollbar, A11y]}
                slidesPerView={2}
                navigation
                // pagination={{ clickable: true }}
                // scrollbar={{ draggable: true }}
                onSwiper={(swiper) => console.log(swiper)}
                onSlideChange={() => console.log('slide change')}
                loop
            >
                {dataArray.map((item, index) => {
                    return (
                        <SwiperSlide key={index} style={{ display: 'flex', justifyContent: 'center' }}>
                            <Link href={`/techDetail?title=${item.title}`}>
                                <div className={cn('imgBox w-[600px] h-[400px] relative overflow-hidden group rounded-xl')}>
                                    <div className='cursor-pointer overflow-hidden w-full h-[400px]' style={{ display: 'block' }}>
                                        <div className='w-full h-full overflow-hidden'>
                                            <Image width={600} height={400} className='group-hover:scale-110 transition-all duration-1000 object-cover' preview={false} src={item.imgSrc}></Image>
                                        </div>
                                        <div className='textBox text-[#f9f9f9] absolute w-full top-[290px] group-hover:top-[230px] transition-all duration-1000 p-3 bg-[#333]/20'>
                                            <div className="title mb-[10px] text-[20px] z-999">{item.title}</div>
                                            <div className="introduce mb-[25px] text-[15px] w-full h-[47px]">
                                                <p>{item.introduce.substring(0, 37) || ''}</p>
                                                <p className='truncate overflow-ellipsis overflow-hidden'>{item.introduce.substring(37) || ''}</p>
                                            </div>
                                            <div className="readmore text-[15px]">
                                                <span>了解更多</span>
                                                <span className='text-[#f8d435] text-[20px] font-bold ml-[5px]'>{'>'}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </Link>

                        </SwiperSlide>
                    )
                })}
            </Swiper>

        </>
    )
}